<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>removeEventListener() 方法</title>
    <style>
        #myDIV {
            background-color: coral;
            border: 1px solid;
            padding: 50px;
            color: white;
        }
    </style>
</head>

<body>
    <!-- removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄: -->
    <div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
        <p>点击按钮移除 DIV 的事件句柄。</p>
        <button onclick="removeHandler()" id="myBtn">点我</button>
    </div>
    <p id="demo"></p>
    <script>
        document.getElementById("myDIV").addEventListener("mousemove", myFunction);
        function myFunction() {
            document.getElementById("demo").innerHTML = Math.random();
        }
        function removeHandler() {
            document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
        }
    </script>
</body>

</html>